<template>
  <a-card :bordered="false">
    <a-list :grid="{ gutter: 8, column: 1 }" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-card bordered
                style="background-color: #40E0D0"
                :title="item.carNo"
                :headStyle="hstyle"
                :body-style='{padding:0}'
        >
          <div
            style="height: 300px;width:100%;margin-top: -301px;position: absolute;font-weight: bolder;font-size: 25px;border: #d2f1f0 solid 1px" class="deviceCss">
            <a-row>
              <a-col :span="6">
                <span style="background-color: #008080">【写入信息】</span>
              </a-col>
              <a-col :span="6">
                <span>[行驶里程]:{{ item.xslc }}</span>
              </a-col>
              <a-col :span="6">
                <span>[二维码]:{{ item.qrCode }}</span>
              </a-col>
              <a-col :span="6">
                <span>[X坐标]:{{ item.xValue }}</span>
              </a-col>
              <a-col :span="6">
                <span>[Y坐标]:{{ item.yValue }}</span>
              </a-col>
              <a-col :span="6">
                <span>[速度]:{{ item.wspeed }}</span>
              </a-col>
              <a-col :span="6">
                <span>[运行方向]:{{ item.runAway }}</span>
              </a-col>
              <a-col :span="6">
                <span>[启动信号]:{{ item.start }}</span>
              </a-col>
              <a-col :span="6">
                <span>[升降]:{{ item.updown }}</span>
              </a-col>
              <a-col :span="6">
                <span>[心跳]:{{ item.wheart }}</span>
              </a-col>
              <a-col :span="6">
                <span>[充电命令]:{{ item.chargOrder }}</span>
              </a-col>
            </a-row>
          </div>
          <div
            style="height: 300px;width:100%;margin-top: -600px;position: absolute;font-weight: bolder;font-size: 25px;border: #d2f1f0 solid 2px" class="deviceCss">
            <a-row>
              <a-col :span="6">
                <span style="background-color: #008080">【读取信息】</span>
              </a-col>
              <a-col :span="6">
                <span>[是否空闲]:{{ item.carStatus == 1 ? "空闲" : "忙碌" }}</span>
              </a-col>
              <a-col :span="6">
                <span>[电池电量]:{{ item.dcdl }}</span>
              </a-col>
              <a-col :span="6">
                <span>[错误类型]:{{ item.errorType }}</span>
              </a-col>
              <a-col :span="6">
                <span>[二维码数值]:{{ item.twoCode }}</span>
              </a-col>
              <a-col :span="6">
                <span>[X偏移量]:{{ item.xvar }}</span>
              </a-col>
              <a-col :span="6">
                <span>[Y偏移量]:{{ item.yvar }}</span>
              </a-col>
              <a-col :span="6">
                <span>[电池电压]:{{ item.dcdy }}</span>
              </a-col>
              <a-col :span="6">
                <span>[电池温度]:{{ item.dcwd }}</span>
              </a-col>
              <a-col :span="6">
                <span>[激光测距传感器]:{{ item.jgcjcgq }}</span>
              </a-col>
              <a-col :span="6">
                <span>[心跳保护]:{{ item.heartBeat }}</span>
              </a-col>
              <a-col :span="6">
                <span>[当前升降位置]:{{ item.position }}</span>
              </a-col>
              <a-col :span="6">
                <span>[升降状态]:{{ item.sjzt }}</span>
              </a-col>
              <a-col :span="6">
                <span>[当前里程完成标志]:{{ item.beFinish }}</span>
              </a-col>
              <a-col :span="6">
                <span>[当前运行速度]:{{ item.speed }}</span>
              </a-col>
              <a-col :span="6">
                <span>[充电状态]:{{ item.cdzt }}</span>
              </a-col>
              <a-col :span="6">
                <span>[当前运行方向]:{{ item.direction }}</span>
              </a-col>
            </a-row>
          </div>
          <img
            slot="cover"
            alt="穿梭车信息"
            src="@assets/11.png"
            class="imgcss"
          />
          <template slot="actions" class="ant-card-actions">
            <a-switch :checked="item.auto" checked-children="自动" un-checked-children="手动" @click="changeStatus(item.carNo)"/>
          </template>
        </a-card>
      </a-list-item>
    </a-list>
  </a-card>
</template>
<script>

import {getFileAccessHttpUrl, postAction} from "@api/manage";
import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import {getAction} from '@/api/manage';

export default {
  name: "FourWayCarDetailInfo",
  mixins: [JeecgListMixin],
  components: {
    getFileAccessHttpUrl,
  },
  data() {
    return {
      data: [],
      hstyle: {"font-size": "20px", "font-weight": "bolder", "color": "#4B0082", "text-align": "center"},
      url: {
        list: "/wcs/wcsDeviceInfo/devicePlcInfo",
        autoOneUrl: "/wcs/wcsDeviceInfo/changeDeviceByCode",
      },
    };
  },
  created() {
    //定时获取工位数据
    this.timerStackerInfo();
    this.initData();
  },
  destroyed() {
    // 在页面销毁后，清除计时器
    this.clear();
  },
  methods: {
    timerStackerInfo() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.initData();
      }, 2000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    initData() {
      this.loadData();
    },
    changeStatus(deviceCode){
      let params = new URLSearchParams();
      params.append('deviceCode', deviceCode);
      postAction(this.url.autoOneUrl,params).then((res)=>{
        if (res.success) {
          this.$message.success("操作成功!");
        }else{
          this.$message.error(res.message);
        }
        this.loadData();
      })
    },
    loadData() {
      getAction(this.url.list, {deviceId: this.$route.query.deviceId,deviceType: this.$route.query.deviceType}).then((res) => {
        if (res.success) {
          this.data = res.result;
        }
      })
    },
  }
};
</script>
<style>
.imgcss {
  height: 500px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  -ms-filter: blur(20px);
}
.deviceCss span{
  color: #E1FFFF;
}
</style>